<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 视图(view)  页面,用于做html展示 -->
    <div id="app">
        <p></p>
        <p></p>
    </div>
</body>
<script>

    // 模型(model)  数据层, 用于存放视图展示所依赖的数据
    let msg = "hello world";
    let count = 100;


    // dom操作 (获取元素, 操作元素改变内容 样式 属性(class id) 绑定事件   元素增删改)
    var p1 = document.querySelector("#app p:nth-child(1)");
    var p2 = document.querySelector("#app p:nth-child(2)");

    // innerHTML 获取和设置html结构(标签 + 文本)
    // p1.innerHTML = msg;
    // p1.innerHTML = `<h2>${msg}</h2>`;

    // innerText  获取和设置html结构(文本 => 如果设置html结构会按文本内容输出)
    // p1.innerText = msg;
    // p1.innerText = `<h2>${msg}</h2>`;

    p1.innerHTML = msg;
    p2.innerHTML = count;


    msg = "hello vue!!"; // 数据改变 视图不会自动更新
    p1.innerHTML = msg;

    // 能否监听数据改变, 自动更新视图???



</script>
</html>